<template>
    <div id='header'>
        <div class='title-box'>
            <div id='title'>
                <div class='logo'><img src="static/img/logo.png" width='100%' alt=""></div>
                <h1 class='title'>火柴契俱乐部</h1>
                <div  class='search'>
                    <input contenteditable='true' style='flex: 1; font-size: 16px;' placeholder='请输入内容'>
                    <div class='magnifier'></div>
                </div>
            </div>
        </div>
        <div class='banner'>
            <ul class='banner-list' >
                <router-link tag= 'li' v-for='(item,index) of banerlist' :key="index+'banner'" :to="'/list'+index" @click='click(el)' class='Li'>{{item.content}}</router-link>
            </ul>
            <ul class='banner-right'>
                <li>中文/英文</li>
                <li>登录</li>
                <li>注册</li>
            </ul>
        </div>
        <div class='swiper'>
        </div>   
    </div>
</template>
<script>
export default {
    name: 'IndexHeader',
    data(){
        return{
            'banerlist': [{
                "dotted": '',
                "content": "首页"
            },{
                "dotted": '',
                "content": "关于我们"
            },{
                "dotted": "",
                "content": "产品与服务"
            },{
                "dotted": "",
                "content": "新闻报道"
            },{
                "dotted": "",
                "content": "联系方式"
            },{
                "dotted": "",
                "content": "客服服务"
            }],
            "imgUrl": ['/static/img/banner.jpg','/static/img/on.jpg','/static/img/service.jpg']
        }
    },
    watch:{
        $route(to,from){
            const index = to.path.split('t')[1];
            const item = document.getElementsByClassName('Li');
            const img = document.getElementsByClassName('swiper')[0];
            const len = item.length;
            for(let i =0;i<len;i++){
                if(i == index){
                    item[i].style = 'border-bottom: 2px solid #f60;'
                }else{
                    item[i].style = 'border-bottom: 0;'
                }
            }
            console.log(index,'router')
            img.style = `background:url('${this.imgUrl[index]}') no-repeat center/cover`
        }
    },
    mounted(){
        const indexi = this.$router.history.current.path.split("t")[1]*1 || 0;
        const item = document.getElementsByClassName('Li');
        $(item).eq(indexi).css({
            'border-bottom': '2px solid #f60'
        }).siblings().css({
             'border-bottom': '0'
        })
        const img = document.getElementsByClassName('swiper')[0];
        img.style = `background:url('${this.imgUrl[indexi]}') no-repeat center /cover;`
    }
}
</script>
<style lang="stylus" scoped>
    #header
        width: 100%;
        min-width: 1108px;
        background: #fff;
        .title-box
            width: 100%;
            border-bottom: 1px solid #ccc;
            #title
                overflow: hidden;
                width: 1108px;
                margin: 0 auto;
                background: '#fff';
                .logo
                    float: left;
                    width: 49px;
                    height: 69px; 
                .title
                    margin: 0 0 0 10px;
                    float: left;
                    font-size: 30px;
                    line-height: 92px;
                    font-weight: 400;
                    color: #f37c2d;
                .search
                    display: flex;
                    float: right;
                    text-align: left;
                    overflow: hidden;
                    margin-top: 28px;
                    width: 229px;
                    height: 30px;
                    line-height: 30px;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    input 
                        border: 0px;
                    .magnifier
                        width: 30px;
                        height: 30px;
                        background: #f37c2d url('/static/img/放大镜.png') no-repeat 5px 5px/20px 20px;
        .banner
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            margin: 0 auto;
            width: 1108px;
            height: 44px;
            overflow: hidden
            .banner-list
                display: flex;
                width: 608px;
                height: 100%;
                .Li
                    cursor: pointer
                    padding: 0 20px;
                    font-size: 16px;
                    line-height: 44px;
            .banner-list>li:nth-child(1)
                border-bottom: 2px solid #f60;
            .banner-right
                display: flex;
                float: right;
                width: 278px;
                height: 100%;
                align-items: center;
                li
                    font-size: 13px;
                    height: 15px;
                    line-height: 15px;
                    text-indent: 2em;
                    padding: 0 10px;
            .banner-right>li:nth-child(1)
                border-right: 1px solid #ccc;
                text-indent: 0em;
            .banner-right>li:nth-child(2)
                background: url('/static/img/登录.png') no-repeat  10px 0/15px 15px;
            .banner-right>li:nth-child(3)
                background: url('/static/img/注册.png') no-repeat 10px 0/15px 15px;
    .swiper
        width: 100%;
        height: 0;
        padding-bottom: 27%;
        background:  url('/static/img/banner.jpg') no-repeat center /cover;
        transition: .3s;

                
  

</style>